<template>
	<div class="swiper" :class="name">
	    <div class="swiper-wrapper" >
	        <slot></slot>
	    </div>
	</div>
</template>

<script type="text/javascript">
	import Swiper from 'swiper/swiper-bundle.js'
	import 'swiper/swiper-bundle.css'
	export default {    
		props:{
			shuliang:{
				type:Number,
				default:0
			},
			name:{
				type:String,
				default:'miaohao'
			}
		},
		mounted() {
			const mySwiper = new Swiper ('.'+this.name, {
			  // direction: 'vertical', // 垂直切换选项
					 slidesPerView: this.shuliang,
			         spaceBetween: 20,
			         freeMode: true,
			         pagination: {
			           el: ".swiper-pagination",
			           clickable: true,
			         },
			})  
		}      
	}
</script>
<style type="text/css">
	.swiper{
		width: 100%;
		height: 8rem;
	}
</style>